@charset "utf-8";
/* 


	BFC（Block formatting contexts）（*）：块级格式上下文
		页面上的一个隔离的渲染区域，那么他是如何产生的呢？可以触发BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作用呢？比如说实现多栏布局’

	IFC（Inline formatting contexts）：内联格式上下文
		IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同
		IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
		那么IFC一般有什么用呢？
		水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
		垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

	GFC（GrideLayout formatting contexts）：网格布局格式化上下文
		当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

	FFC（Flex formatting contexts）:自适应格式上下文
		display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

	css三栏布局方式（*）：
		表格布局，gird布局，flex布局，
		浮动布局，圣杯布局，双飞翼布局，
		绝对定位布局

	img图片自适应：object-fit: cover;等价于使用背景图，尺寸赋值cover，位置居中



	所有样式有webkit的必须加上webkit，并且放在开头
	display：
		block，块状元素
		inline-block，行内块
		inline，行内元素，直接文字，不可设置样式
		//
		table和table-cell先后直接一套使用，table要记得设置width为100%，cell记得设置vertical-align为top
			强制white-space:nowrap且内容宽度过大的时候会撑开容器，用起来要小心，
			或者设置word-break为break-all或者break-word
			该样式属性可替代flex去做比较普遍的列表类目处理
		flex和-webkit-flex，flex布局，适用于移动端和ie10及以上的浏览器
		-webkit-box或者box，块状盒子元素，多行省略的时候用到
	float：
		left，左浮动
		right，右浮动
			浮动之后父级会撑不开
			可使用父级伪类比如xxx:after {content:'';display:block;clear:both}，来撑开父容器
			或者在浮动元素的结尾加块状标签并设置clear:both清除浮动
			或者设置overflow:hidden来清除浮动带来撑不开的问题
		none，没有浮动
	position：定位，通过css的top，left，bottom，right控制位置，单位px
		relative，相对定位，但文档的位置不变
		absolute，绝对定位，相对于父级relative，absolute，fixed的容器范围内并脱离文档流
		fixed：相对于窗口的固定定位
	vertical-align：
		常用的
		top：顶部对齐，middle，中间对齐，bottom，底部对齐
		定位的时候该选项无效，对行内或行内块有效
	margin：
		外边距，上右下左四个值，上-左右-下三个值，上下-左右两个值，与padding内边距一致，px
	padding：
		同上，px
	width：
		宽度，px
	height：
		高度，px
	line-height：
		行高，与高一致是可以垂直居中
	font-family：
		字体类型
	font-size：
		字体大小，px
	font-weight：
		600-800或以上为可见的变粗字体，大到一定限度会无效
	font-style：
		normal，默认
		italic/oblique，都是字体倾斜
	color：
		字体颜色
	background-color：
		背景颜色，rgba仅兼容到ie9
	text-align：
		center，居中，right：右对齐，left，左对齐，
	transition：
		动画时间，毫秒或秒为单位
		指定给某个属性作为动画时间，比如
			width 3000ms
	transform：
		scale(),括号里面单个值为x，y两个值都一样，1为一个单位，两个值为x，y分别取值
		rotate()括号里面，单个值为xyz三个方向都一样角度，三个值为分别取值
			rotateZ(),以z轴旋转
			rotateX(),以X轴旋转
			rotateY(),以Y轴旋转
		translate()，以元素本身作为参考偏移，三个值xyz，可用百分比和px和rem以及rpx为单位
		translate3d()，三个值，xyz，等同于translate()
			所有旋转可结合父元素的perspective:150;使用，150为透视的大小
	opacity：
		透明度，ie10或以上
	-webkit-box-orient: 
		vertical，多行省略用到，ie10或以上
	-webkit-line-clamp: 
		2，多行省略到多少，ie10或以上
	box-shadow：0 0 0 0 #fff
		前两个值坐标，三四个值为虚化程度跟扩散程度，最后一个是颜色，ie10或以上
	text-shadow：0 0 0 #fff
		前两个值坐标，第三个值为虚化程度，最后一个是颜色，ie10或以上
	overflow: 
		hidden，溢出隐藏，可用于多行省略
		visible，溢出显示
		auto，溢出滚动
		scroll，直接出现滚动条
		双值表示x，y方向两个值的属性处理
	border：
		边框，1px solid #000，1像素，实边，黑色
			solid实边，dashed虚线边
	border-radius：
		圆角，单位px，一个值，四角，四个值，左上角开始往右数过来四个角
 */

/* 
	dispaly：flex相关：
		//////父容器设置来决定子容器的排列
		justify-content
			属性定义了项目在主轴上的对齐方式
			flex-start（默认值）：左对齐
			flex-end：右对齐
			center： 居中
			space-between：两端对齐，项目之间的间隔都相等。
			space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
		align-items: 
			flex-start | flex-end | center | baseline | stretch;
			flex-start：交叉轴的起点对齐。
			flex-end：交叉轴的终点对齐。
			center：交叉轴的中点对齐。
			baseline: 项目的第一行文字的基线对齐。
			stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
			当上面的样式设置任一一个，子集的高度就不会撑满
		align-content: 
			flex-start | flex-end | center | space-between | space-around | stretch;
			flex-start：与交叉轴的起点对齐。
			flex-end：与交叉轴的终点对齐。
			center：与交叉轴的中点对齐。
			space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
			space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
			stretch（默认值）：轴线占满整个交叉轴。
			该属性适用多行的情况
		flex-direction：
			属性决定主轴的方向（即项目的排列方向）
			row | row-reverse | column | column-reverse;
			分别代表
				横向，横向倒序，竖向，竖向倒序
		flex-wrap:
			nowrap | wrap | wrap-reverse;
			排不下的时候可做换行处理
			分别为：
				不换行，换行，换行且行数倒序
			wrap配合min-width使用 
		flex-flow: 
			<flex-direction> || <flex-wrap>;
			flex-direction和flex-wrap的简写，默认row wrap
		//////子元素上面设置
		order：
			数值越小，排列越靠前
		flex-grow
			属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
			该属性与width是互相排斥的
		flex-shrink
			属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
		flex-basis
			属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
		flex属性
			是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
			直接单个值就是占多少份的意思，width属性将无效，要么有width，要么有flex
 */

/* 
	animation相关：
		@keyframe xxx{
			//
			from {}to{}
			//或者
			0% {}50%{}100%{}
		}
		每个范围里面就是可以操作的样式
		然后给样式加上
			animation:
				xxx 3000ms
			animation-fill-mode:
				forwards，停留在最后一帧
				infinite，重复
					可直接animation：xxx 3000ms forwards进行复写
			animation-timing-function:
				linear，线性运动
				ease，动画以低速开始，然后加快，在结束前变慢
				ease-in，动画以低速开始
				ease-out，动画以低速结束
				ease-in-out，动画以低速开始和结束
				cubic-bezier(n,n,n,n)，在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
					可直接animation：xxx 3000ms linear forwards进行复写
			animation-delay：
				延迟多少播放
			animation-iteration-count：
				动画播放次数
        
    在uniapp的nvue当中，只能使用唯一的display:flex布局，在这个布局里面能使用的其他样式详见下面的链接
    https://uniapp.dcloud.net.cn/tutorial/nvue-css.html

 */